<template>
    <div class="news-container">
        <router-link
            :to="{ name: 'DetailBlog', params: { blog_id: data.id } }"
            class="cover"
            v-if="data.thumb"
        >
            <img v-lazy="data.thumb" :alt="data.title" />
        </router-link>
        <div class="content">
            <h3 class="title">
                <router-link
                    :to="{ name: 'DetailBlog', params: { blog_id: data.id } }"
                >
                    {{ data.title }}
                </router-link>
            </h3>
            <span class="date">
                <!-- 过滤器会将 data.createDate 作为第一个参数，后续参数需要手动传入 -->
                发布日期：{{ data.createDate | format_time }}
            </span>
            <span class="scan">浏览：{{ data.scanNumber }}</span>
            <span class="comment">评论：{{ data.commentNumber }}</span>
            <span>
                <router-link
                    :to="{
                        name: 'CategoryBlog',
                        params: { cate_id: data.category.id }
                    }"
                >
                    【{{ data.category.name }}】
                </router-link>
            </span>
            <div class="desc">{{ data.description }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            required: true
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.news-container {
    display: flex;
    align-items: center;
    text-align: left;
    height: 170px;
    border-bottom: 1px solid #999;
    &:last-of-type {
        border: none;
    }
    .cover {
        width: 190px;
        height: 140px;
        border-radius: 7px;
        flex: 0 0 auto;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .content {
        padding: 15px;
        .title {
            font-size: 27px;
            font-weight: 500;
            margin-bottom: 15px;
        }
        span {
            margin-right: 15px;
            color: lighten(@secondary, 20%);
            font-size: 10px;
        }
        .desc {
            margin-top: 10px;
            font-size: 12px;
            text-indent: 2em;
        }
    }
}
</style>
